<template>
  <div>
    <!-- Form -->
    <el-dialog :visible.sync="dialogFormVisible">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="text item">
            可选短信模板
          </div>
          <div
            v-for="item in list"
            :key="item"
            class="text item"
            @click="getMessage(item)"
          >
            {{ item }}
          </div>
        </el-col>
        <el-col :span="18">
          <el-card style="height: 610px;">
            <quill-editor
              ref="myQuillEditor"
              v-model="content"
              style="height: 500px;"
              :options="editorOption"
            >
              <!-- 自定义toolar -->
              <div id="toolbar" slot="toolbar">
                <!-- Add a bold button -->
                <button class="ql-bold" title="加粗">
                  Bold
                </button>
                <button class="ql-italic" title="斜体">
                  Italic
                </button>
                <button class="ql-underline" title="下划线">
                  underline
                </button>
                <button class="ql-strike" title="删除线">
                  strike
                </button>
                <button class="ql-blockquote" title="引用" />
                <button class="ql-code-block" title="代码" />
                <button class="ql-header" value="1" title="标题1" />
                <button class="ql-header" value="2" title="标题2" />
                <!--Add list -->
                <button class="ql-list" value="ordered" title="有序列表" />
                <button class="ql-list" value="bullet" title="无序列表" />
                <!-- Add font size dropdown -->
                <select class="ql-header" title="段落格式">
                  <option selected>
                    段落
                  </option>
                  <option value="1">
                    标题1
                  </option>
                  <option value="2">
                    标题2
                  </option>
                  <option value="3">
                    标题3
                  </option>
                  <option value="4">
                    标题4
                  </option>
                  <option value="5">
                    标题5
                  </option>
                  <option value="6">
                    标题6
                  </option>
                </select>
                <select class="ql-size" title="字体大小">
                  <option value="10px">
                    10px
                  </option>
                  <option value="12px">
                    12px
                  </option>
                  <option value="14px">
                    14px
                  </option>
                  <option value="16px" selected>
                    16px
                  </option>
                  <option value="18px">
                    18px
                  </option>
                  <option value="20px">
                    20px
                  </option>
                </select>
                <select class="ql-font" title="字体">
                  <option value="SimSun">
                    宋体
                  </option>
                  <option value="SimHei">
                    黑体
                  </option>
                  <option value="Microsoft-YaHei">
                    微软雅黑
                  </option>
                  <option value="KaiTi">
                    楷体
                  </option>
                  <option value="FangSong">
                    仿宋
                  </option>
                  <option value="Arial">
                    Arial
                  </option>
                </select>
                <!-- Add subscript and superscript buttons -->
                <select class="ql-color" value="color" title="字体颜色" />
                <select
                  class="ql-background"
                  value="background"
                  title="背景颜色"
                />
                <select class="ql-align" value="align" title="对齐" />
                <button class="ql-clean" title="还原" />
                <!-- You can also add your own -->
              </div>
            </quill-editor>
          </el-card>
          <div>
            <el-tag>日期</el-tag>
            <el-tag>收缴率</el-tag>
            <el-tag>催缴率</el-tag>
            <el-tag>周期</el-tag>
            <el-tag>人均效能</el-tag>
            <el-tag>前三名</el-tag>
          </div>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取 消
        </el-button>
        <el-button type="primary" @click="dialogFormVisible = false">
          确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    dialogFormVisible: { type: Boolean }
  },
  data() {
    return {
      list: [
        '可选整改建议模板',
        '整改建议模板一',
        '整改建议模板二',
        '整改建议模板三'
      ],
      text: ''
    }
  },
  computed: {},
  methods: {
    getMessage(item) {
      this.text = item
    }
  }
}
</script>

<style lang="scss" scoped>
.el-dialog {
  padding: 0;
}
.el-col-12 {
  width: 250px;
}
.el-textarea {
  width: 100% !important;
}
.text {
  font-size: 14px;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.el-tag {
  margin: 10px 10px 0 0;
}
.item {
  padding: 18px 0;
}

.box-card {
  width: 480px;
}
</style>
